<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        /* 2.0 页面表现：CSS */
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 1.0 页面结构： HTML -->
    <div class="box"></div>

    <script>
        // 3.0 页面行为： Javascript
        // JS 是运行于我们的客户端浏览器（浏览器是用于检查代码的重要工具）
        // ===============================================================
        // 获取页面的div标签数组
        var ele = document.getElementsByTagName("div");
        // 打印标签数组
        console.log(ele);
        // 给页面的第一个div标签绑定点击事件
        ele[0].onclick = function(){
            // 检查代码是否执行
            console.log("test");
            // 设置第一个div标签的背景色为绿色
            ele[0].style.backgroundColor = "green";
        }
        // ===============================================================
        // 基础编码 （酝酿思维逻辑） 约10天 ； （JS前两周稍微枯燥点，看不到丰富的视图效果）
        // DOM编程  约5天 
        // BOM编程  约3.5天


    </script>

</body>
</html>